<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五子棋在线对战 - UI展示</title>
    <link rel="stylesheet" href="common.css">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 40px 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            padding: 40px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }
        
        .header {
            text-align: center;
            margin-bottom: 40px;
        }
        
        .header h1 {
            color: #2c3e50;
            font-size: 32px;
            margin-bottom: 10px;
        }
        
        .header p {
            color: #7f8c8d;
            font-size: 16px;
        }
        
        .ui-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-bottom: 40px;
        }
        
        .ui-card {
            background: #f8f9fa;
            border-radius: 12px;
            padding: 30px;
            text-align: center;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }
        
        .ui-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            border-color: #3498db;
        }
        
        .ui-card h3 {
            color: #2c3e50;
            font-size: 20px;
            margin-bottom: 15px;
        }
        
        .ui-card p {
            color: #7f8c8d;
            font-size: 14px;
            margin-bottom: 20px;
            line-height: 1.6;
        }
        
        .ui-card .preview-btn {
            background: linear-gradient(135deg, #3498db, #2980b9);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
        }
        
        .ui-card .preview-btn:hover {
            background: linear-gradient(135deg, #2980b9, #1f5f8b);
            transform: translateY(-2px);
        }
        
        .features {
            background: #f8f9fa;
            border-radius: 12px;
            padding: 30px;
            margin-bottom: 30px;
        }
        
        .features h2 {
            color: #2c3e50;
            font-size: 24px;
            margin-bottom: 20px;
            text-align: center;
        }
        
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }
        
        .feature-item {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 15px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .feature-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #3498db;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 18px;
        }
        
        .feature-text {
            flex: 1;
        }
        
        .feature-title {
            color: #2c3e50;
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .feature-desc {
            color: #7f8c8d;
            font-size: 12px;
        }
        
        .tech-stack {
            background: #2c3e50;
            color: white;
            border-radius: 12px;
            padding: 30px;
            text-align: center;
        }
        
        .tech-stack h2 {
            font-size: 24px;
            margin-bottom: 20px;
        }
        
        .tech-items {
            display: flex;
            justify-content: center;
            gap: 30px;
            flex-wrap: wrap;
        }
        
        .tech-item {
            background: rgba(255,255,255,0.1);
            padding: 15px 25px;
            border-radius: 8px;
            font-weight: bold;
        }
        
        @media (max-width: 768px) {
            .ui-grid {
                grid-template-columns: 1fr;
            }
            
            .tech-items {
                flex-direction: column;
                align-items: center;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>五子棋在线对战</h1>
            <p>基于Web的在线对战五子棋游戏 - UI界面展示</p>
        </div>
        
        <div class="ui-grid">
            <div class="ui-card">
                <h3>登录界面</h3>
                <p>用户登录页面，支持账号密码登录，包含表单验证和错误提示功能。</p>
                <a href="login.html" class="preview-btn" target="_blank">预览登录界面</a>
            </div>
            
            <div class="ui-card">
                <h3>注册界面</h3>
                <p>用户注册页面，包含账号密码验证、密码强度检测和实时表单验证。</p>
                <a href="register.html" class="preview-btn" target="_blank">预览注册界面</a>
            </div>
            
            <div class="ui-card">
                <h3>游戏大厅</h3>
                <p>游戏主界面，包含用户信息展示、在线匹配功能和积分流水查看。</p>
                <a href="lobby.html" class="preview-btn" target="_blank">预览游戏大厅</a>
            </div>
            
            <div class="ui-card">
                <h3>游戏房间</h3>
                <p>五子棋对战界面，包含15×15棋盘、游戏计时器和完整的对弈功能。</p>
                <a href="game-room.html" class="preview-btn" target="_blank">预览游戏房间</a>
            </div>
            
            <div class="ui-card">
                <h3>个人中心</h3>
                <p>用户个人主界面，包含个人信息、胜率统计、积分趋势图、历史战绩和常见对手统计。</p>
                <a href="profile.html" class="preview-btn" target="_blank">预览个人中心</a>
            </div>
            
            <div class="ui-card">
                <h3>管理后台</h3>
                <p>管理员后台管理界面，包含用户管理、积分管理和数据统计功能。</p>
                <a href="admin.html" class="preview-btn" target="_blank">预览管理后台</a>
            </div>
        </div>
        
        <div class="features">
            <h2>界面特色功能</h2>
            <div class="features-grid">
                <div class="feature-item">
                    <div class="feature-icon">🎨</div>
                    <div class="feature-text">
                        <div class="feature-title">现代化设计</div>
                        <div class="feature-desc">采用现代化的UI设计，简洁美观，用户体验优秀</div>
                    </div>
                </div>
                
                <div class="feature-item">
                    <div class="feature-icon">📱</div>
                    <div class="feature-text">
                        <div class="feature-title">响应式布局</div>
                        <div class="feature-desc">支持桌面端、平板端和移动端，自适应不同屏幕尺寸</div>
                    </div>
                </div>
                
                <div class="feature-item">
                    <div class="feature-icon">⚡</div>
                    <div class="feature-text">
                        <div class="feature-title">流畅动画</div>
                        <div class="feature-desc">丰富的动画效果，提升用户交互体验</div>
                    </div>
                </div>
                
                <div class="feature-item">
                    <div class="feature-icon">🎮</div>
                    <div class="feature-text">
                        <div class="feature-title">完整游戏功能</div>
                        <div class="feature-desc">包含完整的五子棋游戏逻辑和用户系统</div>
                    </div>
                </div>
                
                <div class="feature-item">
                    <div class="feature-icon">🔒</div>
                    <div class="feature-text">
                        <div class="feature-title">安全验证</div>
                        <div class="feature-desc">完善的表单验证和用户输入安全检查</div>
                    </div>
                </div>
                
                <div class="feature-item">
                    <div class="feature-icon">📊</div>
                    <div class="feature-text">
                        <div class="feature-title">数据统计</div>
                        <div class="feature-desc">详细的用户数据统计和积分流水记录</div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="tech-stack">
            <h2>技术栈</h2>
            <div class="tech-items">
                <div class="tech-item">HTML5</div>
                <div class="tech-item">CSS3</div>
                <div class="tech-item">JavaScript</div>
                <div class="tech-item">响应式设计</div>
                <div class="tech-item">动画效果</div>
            </div>
        </div>
    </div>
</body>
</html>
